<template>
  <div :class="['menu', { tipBox: dataDynamic }]" :style="style">
    <slot></slot>
  </div>
</template>
<script setup>

import { onBeforeUnmount, onMounted, reactive, watch } from 'vue';
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  id: {
    type: String,
    default: 'menu-wrap'
  },
  dataDynamic: {
    type: Boolean,
    default: false
  },
  position: {
    type: Object,
  },
})

const emit = defineEmits(['update:open'])
const hide = () => {
  emit('update:open', false)
}
const style = reactive({
  transform: 'scale(1)',
  display: 'block',
  opacity: 1,
})
watch(() => props.open, (n) => {
  if (n) {
    style.top = props.position.top
    style.left = props.position.left
    style.display = 'block'
    setTimeout(() => {
      style.transform = 'scale(1.03)'
      style.opacity = 0.5
    }, 50)
    setTimeout(() => {
      style.transform = 'scale(1.0)'
      style.opacity = 1
    }, 100)
  } else {
    setTimeout(() => {
      style.transform = 'scale(0.5)'
      style.opacity = 0.5
    }, 50)
    setTimeout(() => {
      style.transform = 'scale(0)'
      style.opacity = 0
      style.display = 'none'
    }, 100)
  }
});
</script>
<style lang="scss" scoped>
.menu {
  padding: 5px;
  pointer-events: none;
  position: relative;
}

.tipBox {
  display: none;
  opacity: 0;
  transform: scale(0.5);
  position: absolute;
  min-width: 160px;
  background-color: var(--bg-w-pure);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  transition: .25s cubic-bezier(0.65, 0.05, 0.1, 1);
}

.dark .tipBox {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
}
</style>